<!--
<!DOCTYPE html>
<html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>客服聊天通道</title>
    <link href="/css/service.css" rel="stylesheet">
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/js/app.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>



<div id="main-content" class="container">
    <div id="main-content" class="container">
        <div class="row">

            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="connect" style="font-size: 50px">申请客服请求:</label><br />
                        <button id="connect" class="btn btn-default" type="submit" style="width: 180px; height:70px;font-size:40px;" >开始通信</button>
                        <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled" style="width: 180px; height:70px;font-size:40px;">断开通信
                        </button>
                    </div>
                </form>
            </div>

            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <button  class="btn btn-default" style="width: 180px; height:70px;font-size:40px;">发送方id</button><br />
                        <input type="text" id="from" class="form-control" style="width: 300px; height:70px;font-size:40px;" th:value="专属客服" ><br/>
                        <button  class="btn btn-default" style="width: 180px; height:70px;font-size:40px;">接收方id</button><br />
                        <input type="text" id="to" class="form-control" style="width: 300px; height:70px;font-size:40px;" th:value="vip客户"> <br/>
                        <input type="text" name="dddd" id="content" class="form-control" style="width: 250px; height: 70px;font-size:30px;" placeholder="请输入咨询内容">
                        <button id="send" class="btn btn-default"  onclick="toggleSound()" type="submit" style="width: 180px; height:70px;font-size:30px;">发送</button>

                        <audio id="Sound">
                            <source src="MP3/5018.mp3">
                        </audio>

                        &lt;!&ndash;<button id="toggle" onclick="toggleSound()"  class="player-button">Play</button>&ndash;&gt;
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table id="conversation" class="table table-striped">
                    <thead>
                    <tr>
                        <th style="font-size: 30px">记录</th>
                    </tr>
                    </thead>
                    <tbody id="notice">


                    </tbody>
                </table>
            </div>
        </div>
    </div></div>
&lt;!&ndash;<div id="mydiv" style="color:black;font-size: 40px;padding-left: 50px";></div>&ndash;&gt;
</body>
<script type="text/javascript">
    function toggleSound(){
        var music=document.getElementById("Sound");
        var send=document.getElementById("send");

        if(music.paused){
            music.play();

        }
    }
    function back() {
        history.back();
    }
    $(function () {
        $("#disconnect").click(function () {
            $("#send").attr("disabled", true);
        })
        $("#connect").click(function () {
            $("#send").attr("disabled",false);
        })
    })
</script>
</html>
-->
<!DOCTYPE html>
<html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
    <title>客服聊天通道</title>
    <link href="/css/service.css" rel="stylesheet">
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/js/app.js"></script>

</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>

<a href="javascript:back();"style="font-size: 30px;color: black">返回</a>
<div id="main-content" class="container">
    <div id="main-content" class="container">
        <div class="row">
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="connect" style="font-size: 50px">申请客服请求:</label><br />
                        <button id="connect" class="btn btn-default" type="submit" style="width: 180px; height:70px;font-size:40px;" >开始通信</button>
                        <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled" style="width: 180px; height:70px;font-size:40px;">断开通信
                        </button>
                    </div>
                </form>
            </div>

            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <button  class="btn btn-default" style="width: 180px; height:70px;font-size:40px;">发送方id</button><br />
                        <!-- <span th:if="${session.user!=null}">-->
                        <input type="text" id="from" class="form-control" style="width: 300px; height:70px;font-size:40px;" th:value="专属客服"  ></span><br/>
                        <!-- <span th:if="${session.user==null}">
                             <input type="text" id="from" class="form-control" style="width: 300px; height:70px;font-size:40px;" value="" ></span><br/>-->
                        <button  class="btn btn-default" style="width: 180px; height:70px;font-size:40px;">接收方id</button><br />
                        <input type="text" id="to" class="form-control" style="width: 300px; height:70px;font-size:40px;" th:value="vip客户"> <br/>
                        <input type="text" name="dddd" id="content" class="form-control" style="width: 350px; height: 70px;font-size:40px;" placeholder="请输入咨询内容">
                        <button id="send" class="btn btn-default"  onclick="toggleSound()" type="submit" style="width: 180px; height:70px;font-size:40px;">发送</button>

                        <audio id="clickSound">
                            <source src="MP3/5018.mp3">
                        </audio>

                        <!--<button id="toggle" onclick="toggleSound()"  class="player-button">Play</button>-->
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <table id="conversation" class="table table-striped">
                    <thead>
                    <tr>
                        <th style="font-size: 30px">记录</th>
                    </tr>
                    </thead>
                    <tbody id="notice">


                    </tbody>
                </table>
            </div>
        </div>
    </div></div>
<!--<div id="mydiv" style="color:black;font-size: 40px;padding-left: 50px";></div>-->
</body>
<script type="text/javascript">
    function toggleSound(){
        var music=document.getElementById("clickSound");
        var send=document.getElementById("send");

        if(music.paused){
            music.play();

        }
    }
    function back() {
        history.back();
    }
    $(function () {
        $("#disconnect").click(function () {
            $("#send").attr("disabled", true);
        })
        $("#connect").click(function () {
            $("#send").attr("disabled",false);
        })
    })
</script>
</html>
